<!doctype html>
<html lang="en">
	<head>

		<meta charset="utf-8">

		<title>Kontext: A context-shift transition inspired by iOS</title>

		<meta name="description" content="A context-shift transition inspired by iOS. Created using JavaScript, CSS 3D transforms and CSS Animations.">
		<meta name="author" content="Hakim El Hattab">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/kontext.css">
		<link rel="stylesheet" href="css/demo.css">

	</head>
	<body>

		<article class="kontext">
			<div class="layer one show">
				<h2>Kontext</h2>
				<p>A context-shift transition. Use the dots below or your keyboard arrows.</p>

				<a class="github-ribbon" href="https://github.com/hakimel/kontext"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
			</div>
			<div class="layer two">
				<h2>Layer Two</h2>
			</div>
			<div class="layer three">
				<h2>Layer Three</h2>
			</div>
		</article>

		<ul class="bullets"></ul>

		<div class="share"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://lab.hakim.se/kontext" data-text="A context-shifting page transition by @hakimel" data-size="" data-related="hakimel" data-count="none">Tweet</a></div>

		<div class="credit">by <a href="http://hakim.se">Hakim El Hattab</a></div>

		<script src="js/kontext.js"></script>
		<script>
			// Create a new instance of kontext
			var k = kontext( document.querySelector( '.kontext' ) );


			// API METHODS:

			// k.prev(); // Show prev layer
			// k.next(); // Show next layer
			// k.show( 3 ); // Show specific layer
			// k.getIndex(); // Index of current layer
			// k.getTotal(); // Total number of layers


			// DEMO-SPECIFIC:

			var bulletsContainer = document.body.querySelector( '.bullets' );

			// Create one bullet per layer
			for( var i = 0, len = k.getTotal(); i < len; i++ ) {
				var bullet = document.createElement( 'li' );
				bullet.className = i === 0 ? 'active' : '';
				bullet.setAttribute( 'index', i );
				bullet.onclick = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
				bullet.ontouchstart = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
				bulletsContainer.appendChild( bullet );
			}

			// Update the bullets when the layer changes
			k.changed.add( function( layer, index ) {
				var bullets = document.body.querySelectorAll( '.bullets li' );
				for( var i = 0, len = bullets.length; i < len; i++ ) {
					bullets[i].className = i === index ? 'active' : '';
				}
			} );

			document.addEventListener( 'keyup', function( event ) {
				if( event.keyCode === 37 ) k.prev();
				if( event.keyCode === 39 ) k.next();
			}, false );

			var touchX = 0;
			var touchConsumed = false;

			document.addEventListener( 'touchstart', function( event ) {
				touchConsumed = false;
				lastX = event.touches[0].clientX;
			}, false );

			document.addEventListener( 'touchmove', function( event ) {
				event.preventDefault();

				if( !touchConsumed ) {
					if( event.touches[0].clientX > lastX + 10 ) {
						k.prev();
						touchConsumed = true;
					}
					else if( event.touches[0].clientX < lastX - 10 ) {
						k.next();
						touchConsumed = true;
					}
				}
			}, false );

		</script>

		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

	</body>
</html>html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

body {
	background-color: #222;
	background-image: url();
	background-repeat: repeat;

	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: #fff;
}

.share {
	position: absolute;
	bottom: 20px;
	left: 24px;
	margin: 0;
	z-index: 1;
	font-size: 0.9em;
}

.credit {
	position: absolute;
	bottom: 24px;
	right: 24px;
	margin: 0;
	z-index: 1;
	font-size: 0.9em;
}

.credit a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.layer {
	text-align: center;
	text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
}

.layer h2 {
	position: relative;
	top: 30%;
	margin: 0;
	font-size: 6.25em;
}

.layer p {
	position: relative;
	top: 30%;
	margin: 0;
}

.layer.one {
	background: #dc6c5f;
}

.layer.two {
	background: #95dc84;
}

.layer.three {
	background: #64b9d2;
}

.bullets {
	position: absolute;
	width: 100%;
	bottom: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
}

	.bullets li {
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin: 0 3px;

		background: rgba( 255, 255, 255, 0.5 );
		box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;

		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

		.bullets li:hover {
			background: rgba( 255, 255, 255, 0.8 );
		}

		.bullets li.active {
			cursor: default;
			background: #fff;
		}

@media screen and (max-width: 400px) {
	body {
		font-size: 12px;
	}

	.layer h2 {
		font-size: 5em;
	}

	.bullets li {
		margin: 0 6px;
	}

	.credit {
		bottom: initial;
		top: 10px;
		right: 10px;
	}

	.share,
	.github-ribbon {
		display: none;
	}
}